<template>
	<div class="hello">
		<myheader v-bind:housetype="housetype" @getchildrensdata="getchildrensdata" v-on:lisenaddress="showaddress"></myheader>
		<div class="what"></div>
		<!--地区显示列表-->
		<div class="istype" v-if="showtype!=''">
			<div class="t-top">
				<span class="c-title">{{address}}<i class="fa fa-close"></i></span>
				<span class="clear"><i class="fa fa-university"></i>清空</span>
			</div>
			<div class="t-center">
				<div>{{recommend.name}}</div>
				<div>均价：<span>{{recommend.money}}</span> 元/㎡.月</div>
				<div>
					<ul class="t-c-ul">
						<li><span>{{recommend.housenumber}}</span>套房源待租<i class="line1"></i></li>
						<li><span>{{recommend.houseCustomer}}</span>用户在浏览</li>
						<li><i class="line2"></i><span>{{recommend.houseCustomerLook}}</span>人最近看房</li>
					</ul>
				</div>
			</div>
			<div class="t-bottom">
				<div class="imgandtitle">
					<img :src="recommend.personImg" />
					<div class="t-b-t">
						<div><span>{{recommend.person}}</span> {{recommend.personEnglish}}</div>
						<div>{{recommend.personJob}}</div>
					</div>
				</div>
				<div><i class="fa fa-phone"></i> 400 612 5310转{{recommend.phone}}</div>
			</div>
		</div>
		<div class="houseInfoList">
			<div class="houseInfoShow" v-for="(list, index) in houseInfo" @click='topart(list.id)'>
				<div class="h-s-img"><img :src="list.house_smallimg" /></div>
				<div class="h-s-title">
					<div>{{list.house_title}}</div>
					<div>{{list.house_intro}}</div>
					<div><span>{{list.house_totalprices}}</span>元/月（{{list.house_unitprice}}元/㎡.月）</div>
					<div v-if="list.house_metro"><span>{{list.house_metro}}</span></div>
				</div>
			</div>
		</div>
		<myfooter></myfooter>
		<mynav></mynav>
	</div>
</template>

<script>
	import mynav from '@/components/houseList/public/mynav'
	import myheader from '@/components/houseList/public/myheader'
	import myfooter from '@/components/houseList/public/myfooter'
	export default {
		name: 'houseInfo',
		data() {
			return {
				footernav: false,
				housetype: "",
				showtype: '',
				address: '渝中-解放碑',
				recommend: {
					personImg: '../../../static/image/y6TTNTWaaD.jpg',
					name: '解放碑写字楼',
					money: '100.76',
					housenumber: '407',
					houseCustomer: '2',
					houseCustomerLook: '15',
					person: '陈宗仁',
					personEnglish: 'Abner',
					personJob: '解放碑顾问',
					phone: '6475',
				},
				houseInfo: "",
				ajaxUrl: ""
			}
		},
		mounted() {
			this.housetype = this.$route.params.id;
			window.addEventListener('scroll', this.handleScroll);
			var _this = this;
			var data = {
				housetypes: this.housetype
			}
			_this.axios.post(this.ajaxUrls + '/api/House/searchhouseinfo', _this.qs.stringify(data)).then(function(res) {
				/*修改图片路劲*/
				for (var i = 0; i < res.data.length; i++) {
					res.data[i].house_smallimg = _this.ajaxUrls + '/uploads/' + res.data[i].house_smallimg + '.jpg';
				}
				_this.houseInfo = res.data;
			}).catch(function(err) {
				console.log(err);
			})
		},
		computed:{
			listenstore:function(){
				return this.$store.getters.getNum;
			}
		},
		watch:{
			listenstore:function(old,newd){
				var _this = this;
				var data = {
					housetypes: old
				}
				_this.axios.post(this.ajaxUrls + '/api/House/housetype', _this.qs.stringify(data)).then(function(res) {
				/*修改图片路劲*/
				for (var i = 0; i < res.data.length; i++) {
					res.data[i].house_smallimg = _this.ajaxUrls + '/uploads/' + res.data[i].house_smallimg + '.jpg';
				}
					_this.houseInfo = res.data;
				}).catch(function(err) {
					console.log(err);
				})
			}
		},
		methods: {
			showaddress: function(data) {
				var _this = this;
				var arr = data.split(',');
				var data = {
					querytype : arr[1],
					queryval : arr[0]
				}
				if(arr[1] == 'house_district'){
					_this.axios.post(this.ajaxUrls + '/api/House/searchhousebyaddress', _this.qs.stringify(data)).then(function(res) {
						/*修改图片路劲*/
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].house_smallimg = _this.ajaxUrls + '/uploads/' + res.data[i].house_smallimg + '.jpg';
						}
						_this.houseInfo = res.data;
					}).catch(function(err) {
						console.log(err);
					})
				}else if(arr[1] == 'house_floorspace'){
						_this.axios.post(this.ajaxUrls + '/api/House/searchhouseinfoall', _this.qs.stringify(data)).then(function(res) {
							/*修改图片路劲*/
							for (var i = 0; i < res.data.length; i++) {
								res.data[i].house_smallimg = _this.ajaxUrls + '/uploads/' + res.data[i].house_smallimg + '.jpg';
							}
							_this.houseInfo = res.data;
						}).catch(function(err) {
							console.log(err);
						})
				}else if(arr[1] == 'house_unitprice'){
					_this.axios.post(this.ajaxUrls + '/api/House/searchdanjia', _this.qs.stringify(data)).then(function(res) {
							/*修改图片路劲*/
							for (var i = 0; i < res.data.length; i++) {
								res.data[i].house_smallimg = _this.ajaxUrls + '/uploads/' + res.data[i].house_smallimg + '.jpg';
							}
							_this.houseInfo = res.data;
						}).catch(function(err) {
							console.log(err);
						})
				}else if(arr[1] =='house_totalprices'){
					_this.axios.post(this.ajaxUrls + '/api/House/searchzongjia', _this.qs.stringify(data)).then(function(res) {
							/*修改图片路劲*/
							for (var i = 0; i < res.data.length; i++) {
								res.data[i].house_smallimg = _this.ajaxUrls + '/uploads/' + res.data[i].house_smallimg + '.jpg';
							}
							_this.houseInfo = res.data;
						}).catch(function(err) {
							console.log(err);
						})
				}else if(arr[1] =='house_district'){
					console.log(100)
					_this.axios.post(this.ajaxUrls + '/api/House/housetype', _this.qs.stringify(data)).then(function(res) {
							/*修改图片路劲*/
							for (var i = 0; i < res.data.length; i++) {
								res.data[i].house_smallimg = _this.ajaxUrls + '/uploads/' + res.data[i].house_smallimg + '.jpg';
							}
							_this.houseInfo = res.data;
							console.log(res)
						}).catch(function(err) {
							console.log(err);
						})
				}
				
			},
			topart: function(houseid) {
				//得到当前数据的id保存
				localStorage.setItem("house_id",houseid)
				this.$router.push({
					path: '/particuars/' + houseid
				});
			},
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				if (scrollTop >= 200) {
					this.footernav = true;
				} else {
					this.footernav = false;
				}
			},
			backTop: function() {
				document.documentElement.scrollTop = document.body.scrollTop = 0;
			},
			getchildrensdata: function(data) {
				this.houseInfo = data;
			}
		},
		components: {
			myheader,
			myfooter,
			mynav
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.what {
		width: 100%;
		height: 1.4rem;
	}
	
	.h-s-title>div:first-of-type {
		width: 100%;
		font-size: 0.3rem;
		font-weight: bold;
		color: #090909;
	}
	
	.h-s-title>div:nth-of-type(2) {
		width: 100%;
		font-size: 0.25rem;
		color: #b0b0b0;
	}
	
	.h-s-title>div:nth-of-type(3) {
		width: 100%;
		font-size: 0.25rem;
		color: #b0b0b0;
	}
	
	.h-s-title>div:nth-of-type(3)>span {
		color: #d3a170;
		font-size: 0.3rem;
	}
	
	.h-s-title>div:nth-of-type(4)>span {
		display: inline-block;
		height: 0.4rem;
		font-size: 0.25rem;
		color: #c7b0ab;
		background: #f9efee;
		padding: 0.05rem;
		box-sizing: border-box;
	}
	
	.h-s-title {
		width: 4rem;
		padding-left: 0.2rem;
		box-sizing: border-box;
	}
	
	.h-s-img>img {
		width: 2.5rem;
	}
	
	.h-s-img {
		width: 3rem;
		height: 100%;
	}
	
	.houseInfoList {
		margin-top: 0.2rem;
	}
	
	.hello {
		background: #f5f6fb;
	}
	
	.houseInfoShow {
		width: 100%;
		height: 3.5rem;
		background: #fff;
		display: flex;
		padding: 0.3rem 0.2rem 0.2rem 0.2rem;
		box-sizing: border-box;
		border-bottom: 0.01rem solid #f0f0f0;
	}
	
	.t-bottom>div:nth-of-type(2) {
		color: #d69338;
		padding-top: 0.45rem;
		box-sizing: border-box;
		font-size: 0.29rem;
	}
	
	.t-b-t>div:nth-of-type(1):span {
		font-size: 0.35rem;
	}
	
	.t-b-t>div:nth-of-type(2) {
		color: #7a7a7a;
	}
	
	.imgandtitle {
		display: flex;
	}
	
	.t-b-t {
		padding-left: 0.3rem;
		box-sizing: border-box;
	}
	
	.t-b-t>div {
		height: 0.4rem;
	}
	
	.imgandtitle img {
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
	}
	
	.t-bottom {
		width: 100%;
		height: 1.3rem;
		display: flex;
		justify-content: space-between;
		padding: 0.2rem 0.3rem 0rem 0.3rem;
		box-sizing: border-box;
		font-size: 0.25rem;
	}
	
	.line1 {
		display: inline-block;
		width: 0.05rem;
		height: 0.3rem;
		background: gray;
		position: absolute;
		top: 0.05rem;
		left: 2.3rem;
	}
	
	.line2 {
		display: inline-block;
		width: 0.05rem;
		height: 0.3rem;
		background: gray;
		position: absolute;
		top: 0.05rem;
		right: 2.15rem;
	}
	
	.t-c-ul {
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	
	.t-c-ul span {
		font-size: 0.3rem;
		color: black !important;
		margin-right: 0.1rem;
	}
	
	.t-center {
		width: 100%;
		height: 1.9rem;
		padding: 0.3rem 0.3rem 0 0.3rem;
		box-sizing: border-box;
		border-bottom: 0.01rem solid #f0f0f0;
	}
	
	.t-center>div {
		width: 100%;
		height: 0.5rem;
		font-size: 0.25rem;
		color: #9b9b9b;
	}
	
	.t-center>div:first-of-type {
		color: #333;
	}
	
	.t-center>div:nth-of-type(2)>span {
		color: #d49f40;
		font-size: 0.35rem;
	}
	
	.t-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
	
	.clear>i {
		color: #b4b8c0;
	}
	
	.clear {
		font-size: 0.12rem;
		color: #444444;
	}
	
	.c-title>i {
		margin-left: 0.1rem;
	}
	
	.c-title {
		display: inline-block;
		width: 1.9rem;
		height: 0.5rem;
		line-height: 0.5rem;
		text-align: center;
		background: #f5f8ff;
		border: 0.0025rem dashed #f0f0f0;
		font-size: 0.12rem;
		color: #444444;
	}
	
	.t-top {
		width: 100%;
		height: 1.1rem;
		border-bottom: 0.01rem solid #f0f0f0;
	}
	
	.istype {
		width: 100%;
		height: 4.3rem;
		background: #fff;
	}
</style>